<template>
  <div class="content">
    <div class="content-month">{{info.month}}月</div>
    <div>{{info.get.toFixed(2)}}</div>
    <div>{{info.pay.toFixed(2)}}</div>
    <div>{{total.toFixed(2)}}</div>
  </div>
</template>

<script>
export default {
    name:'BillContent',
    props:['info'],
    computed:{
        total(){
            // console.log(typeof this.info.get);
            return this.info.get - this.info.pay;
        }
    }
}
</script>

<style scoped>
    .content{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 6vh;
        line-height: 6vh;
        border-bottom: solid 1px silver;
    }
    .content-month{
        width: 24%;
        padding-left: 5%;
        /* color: black; */
    }
    .content div{
        width: 24%;
        font-size: 14px;
        color: black;
  }
</style>